Zadanie: Implementacja guzików
Jak już zapewne się domyślasz, celem tego zadania jest dokończenie naszej gry. Na stronie umieścisz trzy guziki i napiszesz kod, który sprawi, że po kliknięciu któregoś z guzika zostanie rozegrana partia gry. Oczywiście, wybór guzika będzie jednocześnie wyborem ruchu gracza, dzięki czemu nie będzie już potrzeby wpisywania 1, 2 lub 3 w oknie prompt.
Przygotowanie gry do wdrożenia guzików
Pierwszym krokiem będzie stworzenie funkcji playGame, w której ma znaleźć się cały kod, który dotychczas znajdował się w pliku js/script.js. Innymi słowy, na początku pliku dodaj function playGame(){, a na końcu pliku }. Następnie popraw wcięcia kodu wewnątrz funkcji.
Teraz po odświeżeniu strony gra nie powinna już się uruchamiać – za to za chwilę będzie się uruchamiać po kliknięciu guzika!
Funkcja playGame powinna przyjmować jeden argument – liczbę 1, 2 lub 3, która będzie odpowiadała ruchowi gracza. W pierwszej linii deklaracji tej funkcji dodaj deklarację argumentu o nazwie playerInput. Następnie wewnątrz funkcji znajdź linię, w której deklarowaliśmy zmienną playerInput i usuń (lub zakomentuj) tę linię. Zamiast niej będziemy teraz wykorzystywać argument funkcji.
Na końcu pliku, czyli poza funkcją, dodaj jej wykonanie:
playGame(3);Jeśli wszystko poszło dobrze, po odświeżeniu strony powinny wyświetlić się komunikaty z rozegrania gry, przy czym ruchem gracza będą za każdym razem nożyce (odpowiadające liczbie 3 w powyższym kodzie).
Po sprawdzeniu działania funkcji playGame usuń jej wywołanie, aby gra nie uruchamiała się po odświeżeniu strony.
Ostatnim krokiem jest dodanie wywołania funkcji clearMessages (bez argumentów) na samym początku deklaracji funkcji playGame. Ta funkcja, której definicja znajduje się w js/functions.js, usuwa wszystkie wyświetlone do tej pory komunikaty. Dzięki temu będziemy mogli uruchamiać grę wielokrotnie.
Dodanie guzików
W kodzie HTML dodaj teraz trzy guziki do diva o parametrze id="buttons". Każdy z tych guzików ma być elementem <button> i musi mieć jakieś id – mogą to być np. play-rock, play-paper i play-scissors. W treści guzików wpisz nazwy ruchów odpowiadające wartościom id – Kamień, Papier i Nożyce.
Implementacja listenerów
Opierając się na przykładzie z tego submodułu, dodaj na samym końcu pliku js/script.js trzy listenery – po jednym dla każdego z dodanych przed chwilą guzików. Pamiętaj, aby wstawić ich id zamiast test-button!
Następnie wewnątrz anonimowej funkcji każdego z listenerów zmień treść komunikatu wyświetlanego za pomocą funkcji printMessage. Przetestuj teraz czy każdy z guzików wyświetla odpowiedni komunikat na stronie.
W ostatnim kroku, w każdym z listenerów zamień wywołanie funkcji printMessage na wywołanie funkcji playGame z odpowiednim argumentem.
Jeśli wszystko poszło dobrze, po kliknięciu któregoś z guzika, wyświetli się komunikat z rezultatem gry. Zagranie gracza będzie zależało od tego, w który guzik kliknął, podczas gdy ruch komputera będzie losowy.
Gratulacje! W ten sposób udało nam się dokończyć Twoją pierwszą grę!
Nie zapomnij zapisać commita i wysłać go do zdalnego repozytorium.
